<template>
  <div class="pd30 produceFactory">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>物联网数据查询</div>
        <!-- <el-button class="addBtn fw defaultbtn"  type="primary">添加</el-button> -->
      </div>
      <div class="con">
        <div class="con-row flex flexac pl search-box">
          <div class="groupbtn flex">
            <!-- <el-button class="defaultbtn" type="primary" >库存</el-button>
            <el-button class="defaultbtn" type="primary" >出库</el-button>
            <el-button class="defaultbtn" type="primary" >安装</el-button>
            <el-button type="danger" class="defaultbtn" @click="handleDeleteBtn"><i class="el-icon-delete-solid" />删除</el-button> -->
          </div>
        </div>
        <div class="infinite-list-wrapper" style="overflow:auto">
        </div>
        <el-table 
        stripe 
        height="76vh" 
        id="dataList" 
        ref="dataList" 
        class="con-table" 
        type="expand" 
        :data="dataList" 
        @select="handleCheck" 
        @select-all="handleCheck" 
        @selection-change="handleCheckChange">

          <el-table-column align="center" label="注册编号">
            <template slot-scope="scope">
              <span>{{ scope.row.elevatorCode }}</span>
            </template>
          </el-table-column>

          <el-table-column label="出厂编号" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.regCode }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="报警是否打开">
            <template slot-scope="scope">
              <span>{{ scope.row.alarm }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="内外召">
            <template slot-scope="scope">
              <span>{{ scope.row.callType }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="开门状态">
            <template slot-scope="scope">
              <span>{{ scope.row.carStatus }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="温度">
            <template slot-scope="scope">
              <span>{{ scope.row.carTemperature }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="回路">
            <template slot-scope="scope">
              <span>{{ scope.row.circuit }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="方向">
            <template slot-scope="scope">
              <span>{{ scope.row.direction }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="轿门到位">
            <template slot-scope="scope">
              <span>{{ scope.row.doorStatus }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="蹲底">
            <template slot-scope="scope">
              <span>{{ scope.row.downLimit }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="当前楼层">
            <template slot-scope="scope">
              <span>{{ scope.row.floor }}</span>
            </template>
          </el-table-column>

          <el-table-column label="在线" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.isOnline }}</span>
            </template>
          </el-table-column>

          <el-table-column label="轿门是否非开锁区域开门" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.isZone }}</span>
            </template>
          </el-table-column>

          <el-table-column label="总接触器" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.mainContactor }}</span>
            </template>
          </el-table-column>

          <el-table-column label="模式" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.mode }}</span>
            </template>
          </el-table-column>

          <el-table-column label="是否有人" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.passenger }}</span>
            </template>
          </el-table-column>

          <el-table-column label="运行接触器" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.runContactor }}</span>
            </template>
          </el-table-column>

          <el-table-column label="时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.time }}</span>
            </template>
          </el-table-column>

          <el-table-column label="冲顶" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.upLimit }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination
          class="paginationWrap flex"
          :current-page="paging.currentPage"
          :page-sizes="paging.pageSizeArr"
          :page-size="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        /> -->
      </div>
    </div>
  </div>
</template>

<script>
import { fetchIotList } from '@/api/baseInfo/iotData'
import { fetchProDelete } from '@/api/operation/BOM/opBomProduct'
import { showNotice, formatDateTime } from '@/utils/toolclass'

export default {
  name: 'iotData',
  props: {},
  data() {
    return {
      count: 10,
      delPro: '',
      paging: {
        currentPage: 1,
        pageSize: 10,
        pageSizeArr: [10, 20, 50, 100],
        total: 400
      },
      dataList1:[{
        alarm: 0,
        callType: 1,
        carStatus: 0,
        carTemperature: 17,
        circuit: 0,
        direction: 1,
        doorStatus: 0,
        downLimit: 0,
        elevatorCode: "11111111",
        floor: 21,
        id: 1,
        isOnline: 1,
        isZone: 1,
        mainContactor: 0,
        mode: 1,
        passenger: 1,
        regCode: "abbcc",
        runContactor: 0,
        time: "2020-10-12T09:57:50.156807846+08:00",
        upLimit: 0
      }],
      dataList: [],
      queryParam: {
        name: '',
        id: ''
      },
      visible: false,
      editSystem: {},
      isEdit: false,
      refresh: false,
      url: require('@/assets/error.png'),
      seniorSet: {
        'field': false,
        'sortable': false
      },
      tablehead: [
        {
          index: 0,
          prop: 'name',
          label: '系统名',
          sortable: false,
          fixed: true,
          isShow: true
        },
        {
          index: 1,
          prop: 'id',
          label: '简称',
          sortable: false,
          fixed: true,
          isShow: true
        }
      ]

    }
  },
  computed: {},
  watch: {},
  created() {
    this.getSystemList()
  },
  mounted() {
    this.timer1= setInterval(this.scroll,1000)
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/iotEquipment/iotData/index' }))
  },
  methods: {
    scroll() {
      let con1 = this.$refs.dataList;
      // con1.style.marginTop = '-30px';
      this.animate = !this.animate;
      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function () {
        that.dataList.push(that.dataList1[0]);
        that.dataList.shift();
        // con1.style.marginTop = '0px';
        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 500)
    },

    handleCheck(selection, row) {
      this.$refs.dataList.clearSelection()
      if (selection.length === 0) { // 判断selection是否有值存在
        return
      }
      if (row) {
        this.selectioned = row
        this.row = row
        this.delPro = row
        this.$refs.dataList.toggleRowSelection(row, true)
      }
    },
    handleCheckChange(row) {
      if (row.length === 0) {
        this.selectioned = null
      }
    },
    handleDetail(index, row) {
      this.$router.push({
        name: 'system-detail',
        params: { index, row }
      })
    },
    handleSenior(type) {
      if (type === 'field') {
        this.seniorSet.field = !this.seniorSet.field
      }
      if (type === 'sortable') {
        this.seniorSet.sortable = !this.seniorSet.sortable
      }
    },

    handleExportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel')
        const tHeader = ['ID', '母件ID', '物料编码', '厂家', '名称', '性质', 'BOM类型', '备注']
        const filterVal = ['id', 'isSys', 'isDel', 'isWechat', 'sysEntry', 'logo', 'shortName', 'sysName']
        const data = this.formatJson(filterVal, this.dataList)
        export_json_to_excel(tHeader, data, '系统平台表(' + formatDateTime().ymd) + ')'
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleRefresh() {
      this.refresh = true
      this.getSystemList()
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    },
    getSystem() {
      const params = {
        // companyId: this.queryParam.id,
        // companyName: this.queryParam.name,
        multiStatus: 8,
        pageIndex: this.paging.currentPage,
        pageSize: this.paging.pageSize
      }
      fetchIotList(params).then(res => {
        this.dataList = res.data.filter(item => {
          if (item.equipmentName.toLowerCase().indexOf(this.queryParam.name) > -1) {
            return this.dataList.push(item)
          }
        })
        this.handleSearch(this.dataList)
      })
    },
    handleSearch(name) {
      if (this.queryParam.name === '') {
        this.getSystemList()
      }
    },
    getSystemList() {
      const params = {
        // companyId: this.queryParam.id,
        // companyName: this.queryParam.name,
        multiStatus: 8,
        pageIndex: this.paging.currentPage,
        pageSize: this.paging.pageSize
      }
      fetchIotList(params).then((res) => {
        if (res.code === '000000') {
          this.dataList = res.data
          const i = res.data.map((item, i) => i)
          this.paging.total = i.length
        }
      })
    },
    handleEmptySearch() {
      this.queryParam.name = ''
      this.queryParam.id = ''
      this.getSystemList()
    },
    handleAdd() {
      this.visible = true
      this.isEdit = false
      this.editSystem = {
        companyId: '',
        equipmentId: '',
        nature: '',
        parentId: '',
        remark: '',
        typeId: 1,
        version: 1,
        workproc: ''
      }
    },
    handleDeleteBtn() {
      this.$alert('这个操作会删除和它相关联的所有数据,确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        callback: action => {
          if (action === 'confirm') {
            this.handleDelete()
          }
        }
      })
    },
    handleDelete() {
      const selectDataId = this.delPro.id
      fetchProDelete(selectDataId).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '删除成功')
          this.getSystemList()
        }
      })
    },
    handleCloseDialog() {
      this.visible = !this.visible
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getSystemList()
    },
    handleCurrentChange(val) {
      this.paging.currentPage = val
      this.getSystemList()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/public.scss";
.el-carousel__item {
  background-color: #d3dce6;
}
::v-deep .el-table th {
  padding: 5px 0 !important;
}
::v-deep .el-table td {
  padding: 0 !important;
}
.errorImg {
  display: inline-block;
  width: 60px;
  height: 60px;
}
.sys-input {
  width: 260px;
}
.icon-qingkong:before {
  margin-right: 4px;
}
</style>


